<template>
	<view class="demo">
		<view class="orders" >
			<h3 @click="backs" style="margin-left: 10vw;margin-top: 10vw;font-size: 5vw;"><span class="icon-return" style="font-size: 4vw;margin-right: 3vw;"></span>历史记录</h3>
		</view>
		<view class="" style="width: 90vw;height: 25vw;background-color: #ffffff;display: flex;border-radius: 3vw;margin-top: 5vw;" v-for="(item,index) in lists" :key="index" @click="go_xq(index)">
			
				<view class="hist_zuo">
					<image style="width: 100%;height: 100%;" :src="item.image" mode=""></image>
				</view> 
				<view class="hist_center">
					<h3 style="width: 25vw;font-size: 3vw;margin-top: 3vw;margin-left: 3vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.name}}</h3>
					<p style="font-size: 3vw;color: #ccc;margin-top: 2vw;margin-left: 3vw;">{{item.marketHashName}}</p>
				</view>
				<view class="hist_you">
					<h3 style="line-height: 10vw;">￥{{item.price}}</h3>
				</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[]
			}
		},
		onShow() {
			this.shows()
		},
		methods: {
			backs(){
				uni.navigateBack()
			},
			go_xq(index){
				// console.log(index)
				console.log(this.lists[index])
				let detailMsg = JSON.stringify(this.lists[index])
				uni.navigateTo({
					url:`/pages/pay/pay?detailMsg=${detailMsg}`
				})
			},
				shows(){
					uni.request({
						url:"/api/jewerly/viewHistory",
						method:"POST",
						header:{
								'content-Type': 'application/json',
								token: uni.getStorageSync('token')
						},
						
					}).then(res=>{
						console.log(res.data.data)
						this.lists=res.data.data
					})
				}
		}
	}
</script>
<style type="text/css">
	@import url("../../static/icon2/style.css");
</style>
<style>
	.demo{
		width: 100vw;
		/* height: 100vh; */
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* overflow: scroll; */
	}
	.orders{
		width: 100%;
		height: 20vw;
	}
	.hist_item{
		width: 90%;
		height: 50vw;
		background-color: #ffffff;
		border-radius: 5vw;
		display: flex;
		margin-top: 5vw;
	}
	.hist_zuo{
		width: 30vw;
		height: 100%;
		border-radius: 5vw;
		
	}
	.hist_center{
		width: 30vw;
		height: 100%;
	}
		
	.hist_you{
		flex: 1;
	
	}
</style>
